Client Side & Server Side+

Processing the POST request

So now that we know how to send a POST request from the client side, let's return to the server code and learn how to process the data we receive with our POST request. Remember, the last line of code in our previous example called our postData function, passing in the URL of the POST route, and an object containing the data to be posted. That line of code looked like this:
postData('/add', {answer:42})

Example prep

Back on the server side code we should now be able to receive the data answer:42. Remember in the last example, we attached our data to the body of our POST request, so to receive that data and make it actionable we can use request.body.

Example

Here is an example where we set a variable named data to hold the value of request.body, and then print data to see what we received.

app.post('/add', function (request, response) {
    let data = request.body;
    console.log(data);
});

The output of this would display in ther terminal:
{answer:42}

Next Step

But we don't just want to see the data we received, to complete our POST request we must assign the data we received to our project endpoint, the JS object in our server code named projectData. We can simply make a new entry in our JS object using the syntax:

projectData["x"] = y

This code would create a new entry in our JS object API endpoint where the value of a string "x" is y. So if the data received from the POST request was {intelligence:100}, we could create a new entry in our endpoint with the code:
let data = request.body; projectData["intelligence"]= data.intelligence;

Notice that we manually set the string for the key of the new JS object entry as "intelligence", and then to access the property we want to set as its value we use data.intelligence. For more on JS dot notation see the MDN Web Docs entry on Property accessors.

Client Side & Server Side Problem Set

const data = [{animal:"elephant", score: 10},{animal:"kangaroo",score:3}]

function makeData(request){

}

makeData({body:{animal:"turtle", score:7}})

Given the above code, which code block inside the functionmakeData would correctly use the input data to add a new JS object to the data array, following the same structure as the entries already present?

let newData = request;
let newEntry =     
    animal: newData.animal,
    score: newData.score
data.push(newEntry)

let newData = request.body;
let newEntry = {
    animal: newData.animal,
    score: newData.score
    }    
data.push(newEntry)

SOLUTION:

``` let newData = request.body; let newEntry = { animal: newData.animal, score: newData.score } data.push(newEntry) ```

Client Side & Server Side Problem Set

QUESTION:

Let's say there's a client side POST request written in a function, postData(). Assume postData() sent a POST request to your server with the data: {answer:42}. Complete the following server side code to add the body of the request directly to the project endpoint, named projectData.

...
projectData = [];
app.post('/add', function(request, response){
  // Your code goes here   
})

ANSWER:

SOLUTION:

NOTE: The solutions are expressed in RegEx pattern. Udacity uses these patterns to check the given answer

Client Side & Server Side Summary

projectData.push(request.body);

In this lesson we have learned how server side and client side code work together to route data through a web app. We learned how to setup a POST request in the server side code, and then execute a POST request via that path on the client side code. We also covered how to structure and add POST request data to a project API endpoint. In the next lesson we will learn more about asynchronous functions in JavaScript and you will learn more in depth about some of the syntax used in these demos, including async, await, try, and catch .

Client Side & Server Side Further Research

For more details on server side and client side programming see this Stack Overflow post.